<template>
    <div>
            <Card>
                <p slot="title">
				    车源审核
			    </p>
                <div>
                    <Form class="step-form" ref="carsourceData" :model="carsourceData" :rules="carsourceDataRules" :label-width="100">
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem  label="品牌名称：" label-position="left" :label-width="150">
                                     {{carsourceData.brand}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem  label="品牌车系：" label-position="left" :label-width="150">
                                    {{carsourceData.series}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem  label="汽车车型：" label-position="left" :label-width="150">
                                    {{carsourceData.model}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="指导价："  label-position="left" :label-width="150">

                                     {{carsourceData.guidance_PRICE}}万元
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="规格："  label-position="left" :label-width="150">

                                    {{carsourceData.specification}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="车辆定金："  label-position="left" :label-width="150">

                                     {{carsourceData.earnest_PRICE}}元
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="成交价格："  label-position="left" :label-width="150">

                                     {{carsourceData.price}}万元
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="车架号后四位："  label-position="left" :label-width="150">

                                    {{carsourceData.vin}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="外观颜色：" prop="" label-position="left" :label-width="150">

                                     {{carsourceData.out_COLOR}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="内饰颜色：" prop="" label-position="left" :label-width="150">

                                     {{carsourceData.in_COLOR}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="期车/现车：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.car_STATUS}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="手续情况：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.procedures}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="可售区域：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.sell_AREA}}
                                </FormItem>
                            </i-col>
                        </Row>

                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="车源所在地：" label-position="left" :label-width="150">

                                     {{carsourceData.car_LOCATION}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="经度：" label-position="left" :label-width="150">
                                    {{carsourceData.lng}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="纬度：" prop="LAT" label-position="left" :label-width="150">
                                    {{carsourceData.lat}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="3">
                                <FormItem label="车源图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="20">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadList">
                                        <template v-if="item.status === 'finished'">
                                            <img :src="item.url">
                                            <div class="demo-upload-list-cover">
                                                <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                        </template>
                                    </div>

                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="提车时间：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.pick_TIME}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="票据来源：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.invoice_SOURCE}}
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem label="开票方式：" prop="" label-position="left" :label-width="150">

                                    {{carsourceData.invoice_TYPE}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="生产日期：" prop="" label-position="left" :label-width="150">
                                    {{carsourceData.product_TIME}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="备注：" prop="" label-position="left" :label-width="150">

                                   {{carsourceData.remarks}}
                                </FormItem>
                            </i-col>
                        </Row>

                        <FormItem class="button-bottom">
                            <Button :disabled="hasSubmit" @click="editData" style="width:100px;" type="success">提交</Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            id:'',
            status:'',
            defaultList: [],
            imgName: '',
            imgUrl:'',
            imgViewUrl:'',
            visible: false,
            uploadList: [],
            testModelShow:false,
            symptomList:[],
            selectModel:[],
            brandList:[],
            seriesList:[],
            modelsList:[],
            areaList:[],
            areaCityList:[],
            carStatus:[],
            proceduresList:[],
            sellAreaList:[],
            pickTimeList:[],
            invoiceSourceList:[],
            invoiceTypeList:[],
            productTimeList:[],
            outColorList:[],
            inColorList:[],
            location_check:false,
            carsourceInfo: {
                imgs:[],
                BRAND:'',//品牌
                SERIES:'',//车系
                MODEL:'',//车型
                MODEL_ID:'',//车型Id
                CAR_YEAR:'',//年款
                PL:'',
                OUT_COLOR:'',//外观颜色
                IN_COLOR:'',//内饰颜色
                SPECIFICATION:'',//规格
                CAR_LOCATION:'',//车源所在地
                GUIDANCE_PRICE:'',//指导价
                EARNEST_PRICE:'',//车辆定金
                PRICE:0,//成交价
                DISCOUNT_AMT:0,//优惠金额
                ADD_AMT:0,//加价金额
                ADD_POINT:0,//加价点数
                DISCOUNT_POINT:0,//优惠点数
                VIN:'',//车架号后四位
                CAR_STATUS:'',// 期车/现车
                PROCEDURES:'',//手续
                SELL_AREA:'',//销售区域
                PICK_TIME:'',//提车时间
                INVOICE_SOURCE:'',//票据来源
                INVOICE_TYPE:'',//开票方式
                PRODUCT_TIME:'',//生产日期
                REMARKS:''//备注
            },
            carsourceData: {
                brandId:'',
                brandValue:'',
                seriesValue:'',
                seriesId:'',
                modelValue:'',
                modelId:'',
                imgs:[],
                add_AMT: 0,
                add_POINT: 0,
                brand: "阿尔法罗密欧",
                car_LOCATION: "天津市",
                car_STATUS: "期车",
                car_YEAR: "2019款",
                create_TIME: "2019-07-31 15:23:38",
                discount_AMT: 0,
                discount_POINT: 0,
                guidance_PRICE: 37.98,
                earnest_PRICE:0,
                id: "741c4393efe04137b2f65859686db718",
                in_COLOR: "黑",
                invoice_SOURCE: "均可",
                invoice_TYPE: "增票",
                is_HOT: 0,
                model: "Giulia 2019款 2.0T 280HP 豪华版",
                model_ID: "567DxrrM",
                num: 1,
                out_COLOR: "白",
                pick_TIME: "三天内",
                pl: "2.0",
                price: 37.98,
                procedures: "三天内",
                product_TIME: "一年内",
                remarks: "asdasdasdasd",
                sell_AREA: "东区",
                series: "Giulia",
                specification: "中规",
                status: 0,
                type: 1,
                vin: "1234",
                lng:'0',
                lat:'0',
                priceType:0,
                priceValue:0,
                img_link:'',//车源所在地
                skip_type:1,
                is_enable:0,
                img_url: '',
                num:1,
                type:1
            },
            carsourceDataRules: {


            },
            hasSubmit: false,
            // 图片上传
            file: null
        }
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'carsourceindex');
            let id = this.$route.params.id;
            let status = this.$route.params.status;

            this.id = id;
            this.status = status;
            //this.getCarBrands();
            this.selectBaseInfos();

        },
        getInfoById(id){
            let _that = this;
            let url = 'adminlogin/carsource/selectById'
            let data = {
                id: id
            }
            ajax.formRes(url, data).then(res => {
                // success
                _that.carsourceData = res.data;
                //_that.uploadList = res.pictures;
                _that.uploadList = res.pictures;


            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        handleView (url) {
            this.imgViewUrl = url;
            this.visible = true;
        },
            handleRemove (file) {
                // 从 upload 实例删除数据
                // const fileList = this.$refs.upload.fileList;
                // debugger;
                // this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);

                debugger;
                if(file.fileType == 1){
                    this.uploadList.splice(this.uploadList.indexOf(file),1);
                }else{
                    //删除持久层图片信息
                    let _that = this;
                    let url = '/adminlogin/carsource/deletePictureById'
                    let data = {
                        id:file.name
                    }
                    ajax.formRes(url, data).then(res => {
                        debugger;
                        if(res.code == 200){
                            _that.uploadList.splice(_that.uploadList.indexOf(file),1);
                        }

                    }).catch(res => {
                        console.log('有错误信息')
                        // fail
                    })
                }
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                file.url = this.imgUrl;
                file.name = this.imgName;
                file.fileType = 1;
                this.uploadList.push(file);

            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload (file) {
                const check = this.uploadList.length < 9;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 9 张图片。'
                    });
                }else{
                    this.uploadType = 1
                    this.file = file
                    this.upload()
                }
                return check;
            },
        setBrand(obj){
            this.carsourceData.brandId=obj.value;
            this.carsourceData.brandValue=obj.label;
            this.carsourceData.BRAND=obj.label;
            this.getCarSeries(obj.value);

        },
        setCarSeries(obj){//设置车系
            this.carsourceData.seriesId=obj.value;
            this.carsourceData.seriesValue=obj.label;
            this.carsourceData.SERIES = obj.label;
            this.getCarModels(obj.value);

        },
        setPriceValue(value){//设置金额
            let pValue = this.carsourceData.priceValue;
            if(typeof pValue === 'number' && !isNaN(pValue)){
                if(this.carsourceData.priceType == 0){
                    this.carsourceData.price = pValue
                }else if(this.carsourceData.priceType == 1){
                    if(pValue<0){
                        this.carsourceData.discount_AMT = pValue;
                    }else{
                        this.carsourceData.add_AMT = pValue;
                    }
                    this.carsourceData.price = this.carsourceData.guidance_PRICE + pValue;
                }else if(this.carsourceData.priceType == 2){
                    if(pValue<=0){
                        this.carsourceData.discount_POINT = pValue;
                    }else{
                        this.carsourceData.add_POINT = pValue;
                    }
                    this.carsourceData.price = this.carsourceData.guidance_PRICE + this.carsourceData.guidance_PRICE*pValue/10;
                }
            }else{
                this.$Notice.warning({
                    title: '请输入数字格式的数据。'
                });
            }
        },
        setcarModels(item){
            this.carsourceData.modelId = item.modelId;
            this.carsourceData.modelValue = item.modelName;
            this.carsourceData.MODEL=item.modelName;
            this.carsourceData.MODEL_ID=item.modelId;
            this.carsourceData.CAR_YEAR=item.carYear;
            this.carsourceData.PL=item.pl;
            this.carsourceData.SPECIFICATION = item.jklx;
            this.carsourceData.GUIDANCE_PRICE = item.guidancePrice;
            this.carsourceData.PRICE = item.guidancePrice;
            this.carsourceData.priceValue = item.guidancePrice;

        },
        getCarModels(seriesId){
            let _that = this;
            let url = '/adminlogin/car/getCarModelsBySeriesId'
            let data = {
                seriesId:seriesId
            }
            ajax.formRes(url, data).then(res => {
                _that.modelsList = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        getCarSeries(brandId){
            let _that = this;
            let url = '/adminlogin/car/getCarSeriesByBrandId'
            let data = {
                brandId:brandId
            }
            ajax.formRes(url, data).then(res => {
                _that.seriesList = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        getCarBrands(){
            let _that = this;
            let url = '/adminlogin/car/getCarBrands'
            let data = {
            }
            ajax.formRes(url, data).then(res => {
                _that.brandList = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        selectBaseInfos(){//获取区域信息
            let _that = this;
            let url = '/adminlogin/carsource/selectBaseInfos'
            let data = {
            }
            ajax.formRes(url, data).then(res => {
                _that.areaList = res.area;
                _that.carStatus=res.carStatus;
                _that.proceduresList=res.procedures;
                _that.sellAreaList = res.sellArea;
                _that.pickTimeList = res.pickTime;
                _that.invoiceSourceList = res.invoiceSource;
                _that.invoiceTypeList=res.invoiceType;
                _that.productTimeList=res.productTime;
                _that.outColorList=res.outColor;
                _that.inColorList=res.inColor;
                _that.getInfoById(_that.id);
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        setArea(obj){
            this.areaCityList = obj.citys;
        },
        // 上传图片
        upload () {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                that.imgUrl = res.url
                that.imgName = res.name
                that.file = ''
                that.$Message.success('上传成功')
                //that.uploadLoading = false
            }, function (err) {
                console.log(err)
                //this.uploadLoading = false
            }).catch(function (error) {
                console.log(error)
                //this.uploadLoading = false
            })
        },
        // 修改数据
        editData () {
            //设置参数
            let that = this
            let data1 = {
                ID:that.id,
                STATUS:that.status
            }
            let url = 'adminlogin/carsource/updateInfoById'
            ajax.formRes(url, data1).then(res => {
                        // success
                that.$Message.success('编辑成功,页面正在跳转')
                that.hasSubmit = false
                let argu = {}
                that.$router.push({
                    name: 'carsourceindex',
                    params: argu
                })
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        goBack () {
            this.$router.push({
                name: 'carsourceindex'
            })
        },
        // 症状
        hideModel (value) {
            this.testModelShow = false
        },
        addSymptom () {
            // 点击不同按钮传不同的值，此处重新重新回显被选中的值加载网络不好的情况反应会很慢需要加载菊花
            this.$refs.symptomModel.init()
            this.selectModel = this.symptomList
            this.testModelShow = true
        }

    },
    mounted () {
        this.init();
        //this.uploadList = this.$refs.upload.fileList;
    },
    created: function () {

    },
    activated: function () {

    }
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .button-bottom{
        width:400px;
　　    border:1px solid red;
        margin:0 auto;
        margin-top:80px;
    }
</style>
